<style lang="scss" scoped>
.box {
  display: flex;
  width: 100%;
  dl {
    margin-top: 10px;
    width: 100%;
  }
  dt {
    img {
      width: 50px;
      height: 50px;
    }
    text-align: center;
  }
  dd {
    text-align: center;
  }
}
.head-text {
  width: 100%;
  height: 50px;
  margin-top: 10px;
  line-height: 30px;
  display: flex;
  .head-icon {
    width: 30px;
    height: 30px;
    line-height: 30px;
  }
}
.jkda {
  width: 100%;
  height: 40px;
  display: flex;
  line-height: 40px;
  .jkda-text {
    margin-left: 150px;
  }
}
.bs {
  width: 100%;
  height: 80px;

  display: flex;
  .bs-item {
    width: 120px;
    height: 80px;
    background: #f5f9ff;
    padding-left: 10px;
    margin-right: 15px;
  }
}
.jzx {
  width: 100%;
  height: 120px;
}
.tab-box {
  padding: 10px;
  width: 100%;
  height: 100%;
  dl {
    height: 120px;
  }

  dt {
    width: 50px;
    height: 50px;
    float: left;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
  dd {
    line-height: 25px;
  }
  div {
    font-size: 16px;
    font-weight: bold;
    margin-top: 10px;
    p {
      font-size: 14px;
      font-weight: normal;
    }
  }
}
.jklp{
  font-size: 20px;
}
</style>
<template>
  <div>
    <van-nav-bar title="健康" />
    <div>
      <img
        @click="router.push('/index/AI')"
        src="../../医生1.png"
        style="width: 100%; height: 100px"
        alt=""
      />
    </div>
    <div class="box">
      <dl>
        <dt>
          <img src="https://kano.guahao.cn/rE3668793680" alt="" />
        </dt>
        <dd>健康记录仪</dd>
      </dl>
      <dl>
        <dt>
          <img src="https://kano.guahao.cn/ZHW668794389" alt="" />
        </dt>
        <dd>用药提醒</dd>
      </dl>
      <dl>
        <dt>
          <img src="https://kano.guahao.cn/VAJ668790909" alt="" />
        </dt>
        <dd>医学百科</dd>
      </dl>
      <dl>
        <dt>
          <img src="https://kano.guahao.cn/oUZ694076484" alt="" />
        </dt>
        <dd>疾病百查</dd>
      </dl>
    </div>

    <div class="head-text">
      <img src="https://kano.guahao.cn/kjc668830097" class="head-icon" />
      <span style="font-weight: bold">记录多一点，健康多一点，快点击下方记录吧~</span>
    </div>

    <div>
      <div class="jkda">
        <h2>健康档案</h2>
        <div class="jkda-text">
          <span><img src="https://kano.guahao.cn/OG3672760635" alt="" />同步华为运动健康数据</span>
        </div>
      </div>
    </div>
    <div class="bs">
      <div class="bs-item">
        <h4>步数</h4>
        <p style="margin-top: 10px">您还没记录哦</p>
        <button
          style="
            border: 1px solid skyblue;
            border-radius: 10px;
            margin-top: 10px;
            color: blue;
            font-weight: bold;
          "
        >
          去记录
        </button>
      </div>
      <div class="bs-item">
        <h4>体温</h4>
        <p style="margin-top: 10px">您还没记录哦</p>
        <button
          style="
            border: 1px solid skyblue;
            border-radius: 10px;
            margin-top: 10px;
            color: blue;
            font-weight: bold;
          "
        >
          去记录
        </button>
      </div>
      <div class="bs-item">
        <h4>体重</h4>
        <p style="margin-top: 10px">您还没记录哦</p>
        <button
          style="
            border: 1px solid skyblue;
            border-radius: 10px;
            margin-top: 10px;
            color: blue;
            font-weight: bold;
          "
        >
          去记录
        </button>
      </div>
    </div>
    <div style="display: flex; line-height: 35px; background: #f5f9ff; height: 40px">
      <img src="https://kano.guahao.cn/8KL672435699" alt="" />
      <h4>历史记录</h4>
    </div>
    <div class="jzx" style="background: url('https://kano.guahao.cn/UaH667388849')">
      <div class="jzx-item">
        <h3>甲状腺癌</h3>
        <p style="font-size: 12px; margin-top: 5px">甲状腺癌风险评估</p>
        <div
          style="
            margin-left: 260px;
            background: #17a8bb;
            width: 40px;
            height: 20px;
            border-radius: 10px;
            color: white;
          "
        >
          去评估
        </div>
      </div>
    </div>
    <div style="display: flex">
      <div
        style="
          background: url('https://kano.guahao.cn/cvR667399761');
          margin-top: 10px;
          width: 180px;
        "
      >
        <div style="margin-left: 10px">
          <h4>乳腺癌</h4>
          <p style="margin-top: 10px">乳腺癌风险评估</p>
          <div
            style="
              margin-top: 20px;
              width: 40px;
              height: 20px;
              border-radius: 10px;
              background: red;
              color: white;
            "
          >
            去评估
          </div>
        </div>
      </div>
      <div
        style="
          background: url('https://kano.guahao.cn/UKB667447131');
          width: 180px;
          margin-top: 10px;
          margin-left: 15px;
        "
      >
        <h4>肺癌</h4>
        <p style="margin-top: 10px">肺癌风险评估</p>
        <div
          style="
            margin-top: 20px;
            width: 40px;
            height: 20px;
            border-radius: 10px;
            background: blue;
            color: white;
          "
        >
          去评估
        </div>
      </div>
    </div>
    <div>
      <p class="jklp">健康科普</p>
      <van-tabs>
        <van-tab v-for="(item, index) in list" :key="index" :title="item.department">
          <div v-if="item.department == `${item.department}`">
            <div v-for="(v, i) in tablist" :key="i">
              <div v-if="v.department == `${item.department}`">
                <div class="tab-box">
                  <dl>
                    <dt>
                      <img v-lazy="v.avatar" alt="" />
                    </dt>
                    <dd>{{ v.name }} {{ v.doctor }}</dd>
                    <dd>
                      {{ v.time }}
                    </dd>
                    <div>
                      {{ v.desc }}
                      <p>
                        {{ v.title }}
                      </p>
                    </div>
                  </dl>
                </div>
                <div style="padding: 10px">
                  <div>
                    <span style="color: skyblue" @click="goToExternalUrl">#{{ v.department }}</span>
                    <span style="float: right; font-size: 16px" @click="v.like++">
                      点赞<span
                        ><img src="../../点赞.png" style="width: 20px; height: 15px" alt="" /></span
                      ><span> {{ v.like }}</span></span
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script setup lang="ts">
import axios from 'axios'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const list: any = ref([])
const getList = async () => {
  const res = await axios.get('/api/v1/healthtabtitle')

  list.value = res.data.data
}
getList()
const tablist: any = ref([])
const getTabList = async () => {
  const res = await axios.get('/api/v1/healthtablist')

  tablist.value = res.data.data
}
getTabList()

// 跳转网址
const goToExternalUrl = () => {
  // 替换为你想要跳转的网址
  const url = 'https://sns.guahao.com/topic/411477060117118977'
  window.location.href = url
}
</script>